<template>
  <div class="problem-detail-container">
    <div class="problem-content" style="width: 40%;">
      <div class="problem-tabs">
        <button :class="{ active: activeTab === 'detail' }" @click="activeTab = 'detail'">
          题目详情
        </button>
        <button :class="{ active: activeTab === 'submissions' }" @click="activeTab = 'submissions'">
          提交记录
        </button>
      </div>

      <!-- 题目详情内容 -->
      <div class="tab-content" v-show="activeTab === 'detail'">
        <div class="problem-header">
          <h2>{{ problem.title }}</h2>
          <div class="problem-meta">
            <span :class="difficultyClass">
              {{ difficultyText }}
            </span>
            <span v-for="(tag, index) in problem.tags" :key="index" class="problem-tag">
              {{ tag }}
            </span>
          </div>
        </div>

        <div class="problem-description markdown-body" v-html="md.render(problem.description || '')"></div>

        <div class="problem-examples" v-if="problem.testCases && problem.testCases.length">
          <h3>示例</h3>
          <div v-for="(testCase, index) in problem.testCases" :key="index" class="example">
            <div class="example-item">
              <div class="markdown-body" v-html="md.render('> **输入:**\n```\n' + testCase.input + '\n```')"></div>
            </div>
            <div class="example-item">
              <div class="markdown-body" v-html="md.render('> **输出:**\n```\n' + testCase.output + '\n```')"></div>
            </div>
            <div v-if="testCase.explanation" class="example-item">
              <div class="markdown-body" v-html="md.render('> **解释:**\n' + testCase.explanation)"></div>
            </div>
          </div>
        </div>

        <div class="problem-constraints markdown-body" v-if="problem.testCaseHint && problem.testCaseHint.length">
          <h3>提示</h3>
          <ul>
            <li v-for="(constraint, index) in problem.testCaseHint" :key="index">
              {{ constraint }}
            </li>
          </ul>
        </div>
      </div>

      <!-- 提交记录内容 -->
      <div class="tab-content" v-show="activeTab === 'submissions'">
        <h3>提交记录</h3>
        <div class="submission-list">
          <div v-if="isLoadingSubmissions" class="loading">加载中...</div>
          <div v-else-if="submissionError" class="error">{{ submissionError }}</div>
          <div v-else-if="submissions.length === 0" class="empty">暂无提交记录</div>
          <div v-else>
            <div v-for="submission in submissions" :key="submission.id" class="submission-item"
              @click="fetchSubmissionDetail(submission.id)">
              <div class="submission-content">
                <div class="submission-status" :class="getStatusClass(submission.status)">
                  {{ getStatusText(submission.status) }}
                </div>
                <div class="submission-language">
                  {{ displayNames[submission.language] || submission.language }}
                </div>
              </div>
              <div class="submission-time">
                {{ formatTime(submission.time) }}
              </div>
            </div>
          </div>
        </div>
        <div class="pagination">
          <button @click="prevSubmissionPage" :disabled="submissionPage === 1 || isLoadingSubmissions">上一页</button>
          <span>第 {{ submissionPage }} 页</span>
          <button @click="nextSubmissionPage" :disabled="isLoadingSubmissions">下一页</button>
        </div>
      </div>
    </div>
      <!-- 提交结果覆盖层 -->
      <div class="submission-overlay" v-show="showSubmissionResult">
        <div class="submission-result">
          <div class="result-header">
            <h3>提交结果</h3>
            <button class="close-btn" @click="showSubmissionResult = false">×</button>
          </div>

          <div class="result-content">
            <div class="result-item">
              <span class="label">状态：</span>
              <span :class="'status-' + submissionResult.status">
                {{ submissionResult.statusText }}
              </span>
            </div>

            <div class="result-item" v-if="submissionResult.time">
              <span class="label">语言：</span>
              <span>{{ submissionResult.language }} </span>
            </div>

            <div class="result-item" v-if="submissionResult.time">
              <span class="label">执行时间：</span>
              <span>{{ (submissionResult.time).toFixed(2) }} ms</span>
            </div>

            <div class="result-item" v-if="submissionResult.memory">
              <span class="label">内存消耗：</span>
              <span>{{ (submissionResult.memory).toFixed(2) }} MB</span>
            </div>

            <div class="submitted-code">
              <h4>提交代码</h4>
              <pre class="code-block"
                :style="{ maxHeight: 'calc(80vh - 300px)', overflow: 'auto' }">{{ submissionResult.code }}</pre>
            </div>

          </div>
        </div>
      </div>

      <!-- 编辑器区域 -->
      <div class="editor-area">
        <div class="editor-controls">
          <div class="control-group">
            <div class="left-controls">
              <label>
                语言：
                <select v-model="activeLang">
                  <option v-for="lang in languages" :key="lang" :value="lang">
                    {{ displayNames[lang] }}
                  </option>
                </select>
              </label>
              <label>
                字体大小：
                <select v-model.number="fontSize">
                  <option v-for="size in fontSizes" :key="size" :value="size">
                    {{ size }}px
                  </option>
                </select>
              </label>
            </div>
            <button class="reset-btn" @click="handleReset">重置代码</button>
          </div>
        </div>

        <div class="editor-main" style="position: relative; height: calc(100% - 100px);">
          <div ref="editorContainer" class="code-editor" style="height: 100%;"></div>

          <!-- 编辑器面板 - 覆盖在编辑器上方 -->
          <div class="editor-overlay-panel" v-show="showBottomPanel" :style="{ height: panelHeight + 'px' }"
            style="position: absolute; bottom: 0; left: 0; right: 0; background: white; z-index: 100; border-top: 1px solid #e8e8e8; box-shadow: 0 -2px 10px rgba(0,0,0,0.1);">
            <div class="panel-drag-handle" @mousedown="startDrag"
              style="height: 8px; cursor: ns-resize; background: #f0f0f0;"></div>
            <div class="panel-tabs">
              <button :class="{ active: panelActiveTab === 'input' }" @click="panelActiveTab = 'input'">
                自测输入
              </button>
              <button :class="{ active: panelActiveTab === 'result' }" @click="panelActiveTab = 'result'">
                运行结果
              </button>
            </div>

            <div class="panel-tab-content" v-show="panelActiveTab === 'input'"
              style="height: calc(100% - 40px); overflow: auto;">
              <textarea class="test-input" v-model="testInput" placeholder="输入自测数据..."
                style="width: 100%; height: 100%; padding: 10px; border: 1px solid #e8e8e8; border-radius: 4px; resize: none; font-family: monospace;"></textarea>
            </div>

            <div class="panel-tab-content" v-show="panelActiveTab === 'result'"
              style="height: calc(100% - 40px); overflow: auto;">
              <pre class="test-output"
                style="margin: 0; padding: 10px; background: #f8f8f8; border-radius: 4px; white-space: pre-wrap; height: 100%; overflow: auto;">{{ testOutput }}</pre>
            </div>
          </div>
        </div>

        <div class="editor-actions">
          <button class="panel-toggle-btn" @click="toggleBottomPanel">
            {{ showBottomPanel ? '▼ 隐藏面板' : '▲ 显示面板' }}
          </button>
          <button class="run-btn" @click="handleRun">运行代码</button>
          <button class="submit-btn" @click="handleSubmit">提交代码</button>
        </div>
      </div>
    </div>
  
</template>

<script>
import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useProblemStore } from '@/stores/problem'
import { message } from 'ant-design-vue'
import MarkdownIt from 'markdown-it'
import hljs from 'highlight.js'

const md = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(str, { language: lang }).value
      } catch (__) { }
    }
    return ''
  }
})

export default {
  name: 'ProblemDetailView',
  setup() {
    const activeTab = ref('detail')
    const activeLang = ref('cpp')
    const fontSize = ref(18)
    let monaco = null
    let editorInstance = null
    let editorContainer = ref(null)
    const route = useRoute()
    // 分页相关状态
    // 提交记录相关状态
    const submissionPage = ref(1)
    const pageSize = 10
    const submissions = ref([])
    const isLoadingSubmissions = ref(false)
    const submissionError = ref('')

    const fetchSubmissions = async () => {
      isLoadingSubmissions.value = true
      submissionError.value = ''
      try {
        const problemId = route.params.id
        const {list , total} = await problemStore.fetchSubmissions(
          problemId,
          submissionPage.value,
          pageSize
        )
        submissions.value = list || []
      } catch (error) {
        submissionError.value = error.message || '获取提交记录失败'
      } finally {
        isLoadingSubmissions.value = false
      }
    }

    const formatTime = (timestamp) => {
      const date = new Date(timestamp)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
    }

    const fetchSubmissionDetail = async (submissionId) => {
      try {
        const result = await problemStore.fetchSubmissionDetail(submissionId)
        problemStore.currentSubmission = {
          status: result.accepted,
          statusText: getStatusText(result.accepted),
          time: result.time_cost,
          memory: result.memory_cost,
          code: result.code,
          language: result.language
        }
        showSubmissionResult.value = true
      } catch (error) {
        message.error('获取提交详情失败')
      }
    }
    const getStatusClass = (status) => {
      switch (status) {
        case 'accepted': return 'status-accepted'
        case 'wrong_answer': return 'status-wrong'
        case 'time_limit_exceeded':
        case 'memory_limit_exceeded':
          return 'status-error'
        default: return 'status-pending'
      }
    }

    const getStatusText = (status) => {
      switch (status) {
        case 'accepted': return '通过'
        case 'wrong_answer': return '答案错误'
        case 'time_limit_exceeded': return '时间超限'
        case 'memory_limit_exceeded': return '内存超限'
        case 'runtime_error': return '运行时错误'
        case 'compile_error': return '编译错误'
        default: return '等待中'
      }
    }

    watch(submissionPage, () => {
      fetchSubmissions()
    })

    watch(activeTab, (newTab) => {
      if (newTab === 'submissions') {
        fetchSubmissions()
      }
    })

    const displayNames = {
      cpp: 'C++',
      java: 'Java',
      python: 'Python'
    }
    const router = useRouter()
    const problemStore = useProblemStore()
    const problem = computed(() => problemStore.currentProblem || {
      id: '',
      title: '',
      description: '',
      difficulty: 'medium',
      testCaseHint: [],
      tags: [],
      template: {},
      testCases: []
    })


    const difficultyText = computed(() => {
      const difficulty = problem.value.difficulty
      if (typeof difficulty === 'number') {
        switch (difficulty) {
          case 1: return '简单'
          case 2: return '中等'
          case 3: return '困难'
          default: return difficulty
        }
      }
      switch (difficulty) {
        case 'easy': return '简单'
        case 'medium': return '中等'
        case 'hard': return '困难'
        default: return difficulty
      }
    })

    const difficultyClass = computed(() => {
      const difficulty = problem.value.difficulty
      if (typeof difficulty === 'number') {
        switch (difficulty) {
          case 1: return 'difficulty-easy'
          case 2: return 'difficulty-medium'
          case 3: return 'difficulty-hard'
          default: return ''
        }
      }
      const cls = `difficulty-${difficulty}`
      return cls
    })

    onMounted(async () => {
      // 动态引入 monaco-editor 及高亮
      monaco = await import('monaco-editor')
      await import('monaco-editor/esm/vs/basic-languages/cpp/cpp.contribution.js')
      await import('monaco-editor/esm/vs/basic-languages/java/java.contribution.js')
      await import('monaco-editor/esm/vs/basic-languages/python/python.contribution.js')

      // worker 配置
      self.MonacoEnvironment = {
        getWorker(_, label) {
          const path = 'monaco-editor/esm/vs/editor/editor.worker.js'
          return new Worker(new URL(path, import.meta.url), { type: 'module' })
        }
      }

      try {
        const problemId = route.params.id
        if (!problemId) {
          message.error('无效的题目ID')
          return router.push('/problems')
        }
        await problemStore.fetchProblemDetail(problemId)

        editorInstance = monaco.editor.create(editorContainer.value, {
          value: getSampleCode(activeLang.value),
          language: activeLang.value,
          theme: 'vs-light',
          automaticLayout: true,
          fontSize: fontSize.value,
          tabSize: 4, // 默认4空格缩进
          insertSpaces: true
        })
        editorInstance.updateOptions({ tabSize: 4 })
      } catch (error) {
        console.error('初始化失败:', error)
        message.error('页面初始化失败')
      }
    })

    // 切换语言
    watch(activeLang, (newLang) => {
      if (editorInstance) {
        const model = editorInstance.getModel()
        monaco.editor.setModelLanguage(model, newLang)
        editorInstance.setValue(getSampleCode(newLang))
      }
    })

    // 切换字体大小
    watch(fontSize, (newSize) => {
      if (editorInstance) {
        editorInstance.updateOptions({ fontSize: newSize })
      }
    })


    onBeforeUnmount(() => {
      editorInstance?.dispose()
    })
    function getSampleCode(lang) {
      try {
        // 安全获取模板map
        const templatesMap = problem.value?.getTemplatesMap?.();
        if (templatesMap) {
          const template = templatesMap.get(lang.toLowerCase());
          if (template) return template;
        }

        // 默认模板代码
        const defaultTemplates = {
          cpp: `#include <iostream>
using namespace std;

int main() {
    // 在这里编写你的代码
    cout << "Hello World!" << endl;
    return 0;
}`,
          java: `public class Main {
    public static void main(String[] args) {
        // 在这里编写你的代码
        System.out.println("Hello World!");
    }
}`,
          python: `def main():
    # 在这里编写你的代码
    print("Hello World!")

if __name__ == "__main__":
    main()`
        };

        return defaultTemplates[lang] || defaultTemplates.cpp;
      } catch (error) {
        console.error('获取模板代码失败:', error);
        return `// 无法加载${lang}模板\n// 请在此处编写你的代码`;
      }
    }

    const languages = ['cpp', 'java', 'python']

    const fontSizes = [12, 14, 16, 18, 20, 22, 24]

    const showSubmissionResult = ref(false)
    const submissionResult = computed(() => problemStore.currentSubmission || {
      status: '', // accepted,wrong,pending
      statusText: '',
      time: null,
      memory: null,
      testCases: []
    })

    const handleSubmit = async () => {
      try {
        const code = editorInstance.getValue()
        if (!code.trim()) {
          throw new Error('代码不能为空')
        }
        const result = await problemStore.submitSolution({
          problemId: route.params.id,
          language: activeLang.value,
          code: code,
          submit: true,
          language: activeLang.value
        })
        // 如果提交的代码通过了，那就将信息填入到弹窗中，
        
        problemStore.currentSubmission = {
          status: result.accepted,
          statusText: getStatusText(result.accepted),
          time: result.time_cost,
          memory: result.memory_cost,
          code: result.code,
          language: result.language
        }
        showSubmissionResult.value = true
        
      } catch (error) {
        message.error('提交失败: ' + error.message)
      }
    }
    const handleRun = async () => {
      try {
        const code = editorInstance.getValue()
        const test_input = testInput.value;
        if (!code.trim()) {
          throw new Error('代码不能为空')
        }
        const result = await problemStore.submitSolution({
          problemId: route.params.id,
          language: activeLang.value,
          code: code,
          submit: false,
          language: activeLang.value,
          testData: test_input
        })
        // 结果设置到这个val中
        testOutput.value = result.message
        panelActiveTab.value = 'result'
        showBottomPanel.value = true
      } catch (error) {
        message.error('运行失败: ' + error.message)
      }
    }

    // 面板相关状态
    const showBottomPanel = ref(false)
    const panelActiveTab = ref('input')
    const testInput = ref('')
    const testOutput = ref('')
    const panelHeight = ref(200)
    const isDragging = ref(false)
    const startY = ref(0)
    const startHeight = ref(0)

    const currentCode = computed(() => {
      return editorInstance?.getValue() || ''
    })

    const startDrag = (e) => {
      isDragging.value = true
      startY.value = e.clientY
      startHeight.value = panelHeight.value
      document.addEventListener('mousemove', handleDrag)
      document.addEventListener('mouseup', stopDrag)
    }

    const handleDrag = (e) => {
      if (!isDragging.value) return
      const deltaY = startY.value - e.clientY
      const newHeight = startHeight.value + deltaY
      // 限制最小200px，最大为编辑器高度的70%
      const maxHeight = document.querySelector('.editor-main').clientHeight * 0.7
      panelHeight.value = Math.min(Math.max(newHeight, 200), maxHeight)
    }

    const stopDrag = () => {
      isDragging.value = false
      document.removeEventListener('mousemove', handleDrag)
      document.removeEventListener('mouseup', stopDrag)
    }

    const toggleBottomPanel = () => {
      showBottomPanel.value = !showBottomPanel.value
      if (showBottomPanel.value) {
        panelHeight.value = 200 // 恢复默认高度
      }
    }

    const prevSubmissionPage = () => {
      if (submissionPage.value > 1) {
        submissionPage.value--
      }
    }

    const nextSubmissionPage = () => {
      submissionPage.value++
    }

    const handleReset = () => {
      if (editorInstance) {
        editorInstance.setValue(getSampleCode(activeLang.value))
      }
    }

    return {
      problem,
      difficultyText,
      activeTab,
      activeLang,
      fontSize,
      languages,
      fontSizes,
      editorContainer,
      displayNames,
      showSubmissionResult,
      submissionResult,
      handleSubmit,
      currentCode,
      showBottomPanel,
      panelActiveTab,
      testInput,
      testOutput,
      handleRun,
      toggleBottomPanel,
      submissionPage,
      prevSubmissionPage,
      nextSubmissionPage,
      md,
      fontSize,
      handleReset,
      difficultyClass,
      panelHeight,
      startDrag,
      isDragging,
      stopDrag,
      handleDrag,
      // 添加提交记录相关变量
      submissions,
      isLoadingSubmissions,
      submissionError,
      formatTime,
      getStatusClass,
      getStatusText,
      fetchSubmissions,
      fetchSubmissionDetail
    }
  }
}
</script>

<style scoped>
/* 选项卡样式 */
.problem-tabs {
  display: flex;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 20px;
}

.problem-tabs button {
  padding: 8px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  position: relative;
}

.problem-tabs button.active {
  color: #1890ff;
  font-weight: 500;
}

.problem-tabs button.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #1890ff;
}

/* 内容区域 */
.tab-content {
  padding: 10px 0;
}

.empty-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: #999;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
  padding: 10px 0;
}

.pagination button {
  padding: 6px 12px;
  border: 1px solid #d9d9d9;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.pagination button:hover:not(:disabled) {
  border-color: #1890ff;
  color: #1890ff;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination span {
  font-size: 14px;
  color: #666;
}

.discussion-list,
.submission-list {
  min-height: 300px;
}

.discussion-actions {
  margin-top: 20px;
  text-align: center;
}

.create-discussion-btn {
  padding: 8px 16px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.create-discussion-btn:hover {
  background-color: #40a9ff;
}

/* 基础布局 */
.problem-detail-container {
  display: flex;
  height: calc(100vh - 74px);
  overflow: hidden;
  gap: 15px;
  padding: 5px;
}

.problem-content {
  flex: 4;
  padding: 15px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  background: #fff;
}

.tab-content {
  padding: 0 10px 10px 0;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  margin-right: -10px;
}

/* 自定义滚动条 */
.tab-content::-webkit-scrollbar {
  width: 6px;
}

.tab-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.tab-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.tab-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.editor-area {
  flex: 6;
  padding: 15px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  background: #fff;
  display: flex;
  flex-direction: column;
}

.controls {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  align-items: center;
}

.controls label {
  font-size: 14px;
}

.controls select {
  margin-left: 0.5rem;
  padding: 2px 4px;
}

.editor-placeholder {
  flex: 1;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  border-radius: 4px;
}

.problem-header {
  margin-bottom: 20px;
}

.problem-header h2 {
  margin: 0 0 8px 0;
  font-size: 22px;
}

.problem-meta {
  display: block;
}

.problem-meta>* {
  display: block;
  margin-bottom: 8px;
}

.problem-tag {
  background: #f0f0f0;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: #666;
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 8px;
}

.difficulty-easy {
  color: #00b8a3;
  font-weight: 500;
}

.difficulty-medium {
  color: #ffc01e;
  font-weight: 500;
}

.difficulty-hard {
  color: #ff375f;
  font-weight: 500;
}

.problem-description {
  line-height: 1.6;
  margin-bottom: 20px;
}

.markdown-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
}

.markdown-body pre {
  background-color: #f6f8fa;
  border-radius: 6px;
  padding: 16px;
  overflow: auto;
  border: 1px solid #e1e4e8;
}

.markdown-body code {
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 85%;
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
  padding: 0.2em 0.4em;
}

.markdown-body pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.markdown-body h1 {
  font-size: 2em;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
}

.markdown-body h2 {
  font-size: 1.5em;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
}

.markdown-body h3 {
  font-size: 1.25em;
}

.markdown-body ul,
.markdown-body ol {
  padding-left: 2em;
}

.markdown-body blockquote {
  padding: 0 1em;
  color: #6a737d;
  border-left: 0.25em solid #dfe2e5;
  margin-left: 0;
}

.problem-examples {
  margin-bottom: 20px;
}

.example {
  background: #f7f7f7;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.example-item {
  margin-bottom: 8px;
}

.example-item:last-child {
  margin-bottom: 0;
}

pre {
  background: #f0f0f0;
  padding: 8px;
  border-radius: 4px;
  overflow-x: auto;
}

.code-block {
  background: #f8f8f8;
  padding: 12px;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.5;
  max-height: 300px;
  overflow: auto;
  margin-top: 10px;
  border: 1px solid #e0e0e0;
}

.code-block::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.code-block::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

/* 编辑器控制栏 */
.editor-controls {
  padding: 10px 0;
}

.control-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-controls {
  display: flex;
  gap: 15px;
  align-items: center;
}

.control-group label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.control-group select {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
}

.reset-btn {
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}

.reset-btn:hover {
  border-color: #1890ff;
  color: #1890ff;
}

/* 编辑器主体 */
.editor-main {
  flex: 1;
  min-height: 550px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.code-editor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 提交结果覆盖层 */
.submission-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.submission-result {
  width: 60%;
  max-height: 80vh;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.result-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.result-header h3 {
  margin: 0;
  font-size: 18px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 0 8px;
}

.result-content {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.result-item {
  margin-bottom: 12px;
  display: flex;
}

.label {
  font-weight: 500;
  min-width: 80px;
}

.status-accepted {
  color: #52c41a;
}

.status-wrong {
  color: #ff375f;
}

.status-pending {
  color: #1890ff;
}

.submitted-code {
  margin: 20px 0;
}

.submitted-code h4 {
  margin-bottom: 10px;
}

.test-cases {
  margin-top: 20px;
}

.test-case {
  margin-bottom: 16px;
  padding: 12px;
  background: #f7f7f7;
  border-radius: 4px;
}

.case-item {
  margin-bottom: 8px;
}

.case-label {
  font-weight: 500;
  display: inline-block;
  min-width: 50px;
}

/* 底部面板样式 */
.bottom-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #e8e8e8;
  transition: height 0.3s ease;
  z-index: 10;
}

.panel-header {
  padding: 10px;
  background: #f5f5f5;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  color: #666;
}

.panel-content {
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
}

.panel-tabs {
  display: flex;
  border-bottom: 1px solid #e8e8e8;
}

.panel-tabs button {
  padding: 8px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #666;
}

.panel-tabs button.active {
  color: #1890ff;
  font-weight: 500;
  border-bottom: 2px solid #1890ff;
}

.panel-tab-content {
  flex: 1;
  padding: 10px;
  overflow: auto;
}

.test-input {
  width: 100%;
  height: 100%;
  padding: 10px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  resize: none;
  font-family: monospace;
}

.test-output {
  background: #f8f8f8;
  padding: 10px;
  border-radius: 4px;
  white-space: pre-wrap;
  height: 100%;
  overflow: auto;
}

/* 编辑器操作按钮 */
.editor-actions {
  padding: 15px 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.editor-actions button {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.editor-actions button:hover {
  opacity: 0.8;
}

.editor-actions .run-btn {
  background-color: #1890ff;
  color: white;
}

.editor-actions .submit-btn {
  background-color: #52c41a;
  color: white;
}

.problem-header {
  margin-bottom: 20px;
}

.problem-header h2 {
  margin: 0 0 8px 0;
  font-size: 22px;
}

.problem-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.problem-tag {
  background: #f0f0f0;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}

.submission-item {
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #f0f0f0;
}

.submission-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.submission-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.submission-status {
  font-weight: 500;
  font-size: 14px;
}

.submission-language {
  font-size: 12px;
  color: #666;
}

.submission-time {
  font-size: 12px;
  color: #999;
}
</style>
